<!doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>选择城市</title>
		<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
		<meta http-equiv="Pragma" content="no-cache" />
		<meta http-equiv="Expires" content="0" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="css/unified.css" />
		<script src="js/mui.min.js"></script>
		<script src="js/jquery-3.2.1.js"></script>
		<!--<script src="js/Fn.js"></script>-->
		<style>
			/*#1fb48e*/
			
			.citybox {
				padding: 0 10px;
			}
			
			.city,
			.county,
			.provincial {
				position: relative;
			}
			
			.provincial {
				padding: 13px 15px;
				border-bottom: 1px solid #e1e1e1;
				font-size: 1.02em;
				font-weight: bold;
			}
			
			.provincial:before {
				content: '';
				width: 3px;
				height: 50%;
				position: absolute;
				background: #1fb48e;
				top: 25%;
				left: 0;
			}
			
			.city {
				padding: 10px 25px;
				border-bottom: 1px solid #e1e1e1;
				color: #444;
			}
			
			.county {
				padding: 8px 25px;
				border-bottom: 2px solid #fff;
				padding-left: 25px;
				font-size: 0.9em;
				border-bottom: 1px solid #e1e1e1;
				color: #666;
			}
			
			.Optional:after {
				content: '\e61a';
				position: absolute;
				right: 8px;
				font-size: 16px;
				color: #1fb48e;
				transition: 500ms all;
				font-weight: bold;
			}
			
			.active:after {
				transform: rotate(180deg);
			}
			
			.city.Optional:after {
				color: #c5c5c5;
			}
			
			.city:before {
				content: '';
				width: 6px;
				height: 6px;
				border-radius: 50%;
				position: absolute;
				background: #c5c5c5;
				top: calc(50% - 3px);
				left: 10px;
			}
			
			.cityseach {
				font-size: 1em;
				padding: 3px 10px 3px 40px;
				background: #f5f5f5 !important;
				width: calc(100% - 80px) !important;
			}
			
			.headsearch {
				border-bottom: 10px solid #eaeaea;
				padding-bottom: 10px;
				position: relative;
				margin-top: 10px;
			}
			
			.headsearch .cityblockbox {
				margin: 10px 10px -10px 10px;
			}
			
			.headsearch:before {
				content: '\e616';
				position: absolute;
				left: 10px;
				top: 10px;
				font-size: 21px;
			}
			
			.seachmenu {
				background: #1fb48e !important;
				width: 80px;
				height: 40px;
				color: #fff;
				text-align: center;
				line-height: 40px;
				float: right;
				font-size: 0.95em;
			}
			
			.nowcitybox {
				border-bottom: 10px solid #eaeaea;
				padding: 0px 10px;
			}
			
			.nowcitytitle {
				color: #333;
				font-weight: bold;
				padding: 10px 0;
				/*border-bottom: 1px solid #e1e1e1;*/
			}
			
			.nowcitytitle .iconfont {
				font-size: 18px;
				margin-right: 5px;
			}
			
			.cityblock {
				padding: 6px 14px;
				font-size: 0.9em;
				border-radius: 20px;
				background: #efefef;
				color: #666;
				float: left;
				margin: 0 10px 10px 0;
			}
			
			.cityblockbox:after {
				content: '';
				clear: both;
				display: block;
				visibility: hidden;
				height: 0;
			}
			.Refreshcity{
				padding: 6px 14px;
				font-size: 0.9em;
				border-radius: 20px;
				background: #1fb48e;
				color: #fff;
				display: table;
				margin: 0 10px 10px 0;
			}
			.cityblockbox {
				zoom: 1;
			}
		</style>
		<!--<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=MXOQUm1qoGnMcQ0sGKd5F5FzypR0irNk"></script>-->
		<script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>
		 <script src="http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js" type="text/ecmascript"></script>

	</head>

	<body>
		<div class="headsearch iconfont">
			<input type="text" placeholder="输入关键字,搜索城市" class="cityseach" />
			<div class="seachmenu">搜索</div>
			<div class="cityblockbox" id="seachResult">
				<!--搜索结果-->
				<!--<div class="cityblock">深圳市</div>-->
			</div>

		</div>
		<div class="nowcitybox">
			<div class="nowcitytitle"><span class="iconfont icon-map"></span>当前城市</div>
			<div class="cityblockbox" id="nowcity">
				<div class="cityblock" >获取中</div>
			</div>

		</div>
		<div class="nowcitybox">
			<div class="nowcitytitle"><span class="iconfont icon-remen"></span>热门城市</div>
			<!--北京 上海 成都 深圳 香港 天津 热门城市推荐来自网络-->
			<div class="cityblockbox">
				<div class="cityblock" data-adcode="110000">北京市</div>
				<div class="cityblock" data-adcode="810000">香港特別行政區</div>
				<div class="cityblock" data-adcode="310000">上海市</div>
				<div class="cityblock" data-adcode="510100">成都市</div>
				<div class="cityblock" data-adcode="440300">深圳市</div>
				<div class="cityblock" data-adcode="120000">天津市</div>
			</div>

		</div>
		<div class="citybox iconfont">

		</div>
		

<script>document.write("<script type='text/javascript' src='js/Fn.js?v=" + Date.now() + "'><\/script>");document.write("<script type='text/javascript' src='js/location.js?v=" + Date.now() + "'><\/script>");</script> 


	</body>

</html>